<template>
  <div class="newphone">
    <div class="newphoneHead">
      <span class="next">
        <el-button class="elbutton" type="primary" @click="next">保存</el-button>
      </span>
      <el-page-header @back="goBack" content="绑定新手机号" title="" id="ico"></el-page-header>
    </div>
      <el-form  class="newphonefrom" :model="formLabelAlign"  label-width="120px" >
        <el-form-item label="旧手机号:" style="margin-bottom: 22px;">
          <div class="oldphone">{{oldphone}}</div>
        </el-form-item>
        <el-form-item label="新手机号:" style="margin-bottom: 22px;">
            <el-input v-model="formLabelAlign.newphone"  type="text" placeholder="请输入新的手机号码"  id="verification"></el-input>
        </el-form-item>
        <el-form-item label="验证码:">
            <div id="securitycodebox">
                <el-input  v-model="formLabelAlign.securitycodebox"  id="securitycode" placeholder="请输入验证码"></el-input>
            </div>
            <el-button class="elbutton" type="primary">获取验证码</el-button> 
        </el-form-item>  
        </el-form>
  </div>
</template>
<script>
export default {
    data() {
        return {
            oldphone:null,//旧密码
              formLabelAlign: {
                newphone: '',
                securitycodebox: '',
            }
        }
    },
    methods:{
        goBack(){
            this.$router.go(-1)
        },
        next(){

        }
    },
    mounted() {
        let imitatephone=localStorage.getItem("imitatephone")
        this.oldphone=imitatephone
    },
};
</script>
<style lang="less" scoped>
/deep/ .el-page-header {
    line-height: 50px;
}
.oldphone{
    float:left;
    margin-left:10px
}
.newphonefrom{
    margin-top: 50px;
}
/deep/ .el-form-item {
    margin-bottom: 22px;
    width: 707px;
    margin:0 auto;
    }
    /deep/ #securitycode{
        float: left;
        width: 307px;
    }
    #securitycodebox{
        float:left;
        margin-right:10px
    }
    .elbutton{
        float: left;
    }
.newphone {
  background-color: white;
    .newphoneHead{
         height: 45px;
            line-height:120px;
            padding-bottom: 5px;
            width: 95%;
            border-bottom:1px solid #e9eef3;
            margin: 0 auto;
            .next{
                display: inline-block;
                float: right;border-radius:10px;line-height:50px ;
                /deep/ .elbutton{
                    margin-top: 10px;
                    height: 30px;
                    width: 110px;
                    line-height: 5px;
                }
            }
    }
}
</style>